<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="计划名称:">
          <el-input v-model="formInline.user" placeholder="计划名称"></el-input>
        </el-form-item>
        <el-form-item label="负责人:">
          <el-select v-model="formInline.region" placeholder="负责人">
            <el-option label="张三" value=""></el-option>
            <el-option label="王五" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围:">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder=""
            end-placeholder="">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="计划编号"
          width="250px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上架时间"
          width="250px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="负责人"
          width="250px">
          <template slot-scope="scope">
            <i class="el-icon-user-solid"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="培训计划名称"
          width="300px">
          <template slot-scope="scope">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="250px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              type="success"
              @click="checkDialogTableVisible = true">查看</el-button>
            <el-button
              size="mini"
              plain
              type="primary"
              @click="updateDialogTableVisible = true">编辑课程</el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              @click="deleteThisPlan">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
      <template>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </template>
      </div>
    </el-main>
    <!--弹框-->
    <el-dialog title="查看培训计划信息" :visible.sync="checkDialogTableVisible">
      <el-card >
        <div>
          <el-descriptions class="margin-top"  :column="3" size="" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                负责人
              </template>
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                负责人电话
              </template>
              18100000000
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                制定时间
              </template>
              2021.1.3
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                计划名称
              </template>
              培训计划计划计划
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                备注（计划方向）
              </template>
              这是一个阿爸阿爸阿爸..
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-divider content-position="left">计划课程</el-divider>
      <el-table :data="gridData">
        <el-table-column property="date" label="课程编号" width="175px"></el-table-column>
        <el-table-column property="name" label="课程名称" width="175px"></el-table-column>
        <el-table-column property="name" label="课程讲师" width="175px"></el-table-column>
        <el-table-column property="name" label="学习方式" width="175px"></el-table-column>
        <el-table-column property="name" label="培训地点" ></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="修改计划课程" :visible.sync="updateDialogTableVisible">
      <el-button type="primary" @click="addCourseDialogTableVisible = true">增加新课程</el-button>
      <el-table :data="gridData">
        <el-table-column property="date" label="课程编号" width="175px"></el-table-column>
        <el-table-column property="name" label="课程名称" width="175px"></el-table-column>
        <el-table-column property="name" label="学习方式" width="175px"></el-table-column>
        <el-table-column property="name" label="培训地点" ></el-table-column>
        <el-table-column  ><el-button
          size="mini"
          type="danger"
          plain
          @click="deleteThisCourse">下架</el-button></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="增加当前课程" :visible.sync="addCourseDialogTableVisible">
        <el-transfer
          filterable
          :filter-method="filterMethod"
          filter-placeholder="请输入课程名称或编码"
          v-model="value"
          :data="data"
          :titles="['待选课程','已选课程']">
        </el-transfer>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    </el-dialog>
  </el-container>
</template>

<script>
    export default {
        name: "TrainPlanManage",
      data() {
        //穿梭框的数据项
        const generateData = _ => {
          const data = [];
          for (let i = 1; i <= 15; i++) {
            data.push({
              key: i,
              label: `课程- ${ i }`,
            });
          }
          return data;
        };
        return {
          //穿梭框存放未选择的数据
          data: generateData(),
          //穿梭框存放选择课程的数据
          value:[],
          //弹窗状态
          checkDialogTableVisible: false,
          updateDialogTableVisible:false,
          addCourseDialogTableVisible:false,
          //头部表单数据
          formInline: {
            user: '',
            region: ''
          },
          //表格数据
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }],
          //信息弹窗数据
          gridData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
        }
      },
      methods: {
        //表单提交
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
          //计划下架提示
        deleteThisPlan() {
          this.$confirm('此操作将永久删除XXX计划, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        //课程下架提示
        deleteThisCourse() {
          this.$confirm('此操作将永久删除XXX课程, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        onSubmit() {
          console.log('submit!');
        },
        handleClick(row) {
          console.log(row);
        }
      }
    }
</script>

<style scoped>
.pagination{
  margin-top: 10px;
  position:relative;
  left:450px;
}

</style>
